<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>评论-闲言轻博客</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="__INDEX__/xianyan/layui/css/layui.css">
	<link rel="stylesheet" href="__INDEX__/xianyan/static/css/mian.css">
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="__INDEX__/js/common.js"></script>
	
</head>
<body class="lay-blog">
		{include file='index/header' /}
		<div class="container-wrap">
			<div class="container container-message container-details container-comment">
					<div class="contar-wrap">
						<div class="item">
							<div class="item-box  layer-photos-demo1 layer-photos-demo">
								<h3>{$newsinfo['title']}</h3>
								<h5>发布于：<span>{$newsinfo['pushtime']|strtotime|friendlyDate}</span></h5>
								<p>{$newsinfo['abstract']}</p>
								<p>{$newsinfo['content']|htmlspecialchars_decode|raw}</p>
								<div class="count layui-clear">
									<span class="pull-left">阅读 <em>{$newsinfo['hits']}</em></span>
									<span class="pull-right like {eq name="newsinfo['iszan']" value="1"}layblog-this{/eq}" ><i class="layui-icon layui-icon-praise"></i><em>{$newsinfo['zan']}</em></span>
								</div>
							</div>
						</div>	
						<form class="layui-form" id="comment">
							<input type="hidden" name="newsid" value="{$data['newsid']}"> 
						    <input type="hidden" name="pid" value=""> 
						    <input type="hidden" name="floor" value=""> 

							<div class="layui-form-item layui-form-text">
								<textarea  class="layui-textarea"  style="resize:none" placeholder="评论点什么啊" name="content"></textarea>
							</div>
							<div class="btnbox">
								<button type="button" class="layui-btn" onclick="javascript:comment($(this));">评论</button>
							</div>
						</form>


						<div id="comment-list">
						<center class="fly-none">评论加载中...</center>
							<!-- {cms:comment name="v" pid="0"}
							<div class="info-box">
								<div class="info-item">
									<img class="info-img" src="{$v['avatar']}" alt="">
									<div class="info-text">
										<p class="title count">
											<span class="name">{$v['nickname']}</span>
											<span>发表时间：{$v['addtime']} </span>
											<span class="info-img"><i class="layui-icon layui-icon-praise"></i>{$v['zan']}</span>
										</p>
										<p class="info-intr">{$v['content']}<span style="float:right;font-size:12px;" onclick='javascript:huifu("{$v['id']}","{$v['id']}","{$v['nickname']}");'>
											   回复
										</span></p>
									</div>
								</div>
							</div>
							{/cms:comment} -->
						</div>
						<center id="page"></center>

					</div>
			</div>
		</div>
		<div class="footer">
			<p>
				<span>&copy; 2018</span>
				<span><a href="http://www.layui.com" target="_blank">layui.com</a></span> 
				<span>MIT license</span>
			</p>
			<p><span>人生就是一场修行</span></p>
		</div>
	<script src="__INDEX__/xianyan/layui/layui.js" />

	</script>
	<script type="text/javascript">

		layui.define(['element', 'form','laypage','jquery','laytpl'],function(exports){
		  var element = layui.element
		  ,form = layui.form
		  ,laypage = layui.laypage
		  ,$ = layui.jquery
		  ,laytpl = layui.laytpl;

		  //statr 分页
		  
		  laypage.render({
		    elem: 'page' // 元素
		    ,count: {$newsinfo['comment_num']} //数据总数
		    ,theme: '#1e9fff'
		    ,jump: function(obj, first){

		      $.get("{:url('comment')}",{newsid:{:input('newsid')},page:obj.curr},function(list){

		        let html=status="";
		 	
		        if(list.length=='0'){
		          let msg=obj.curr=="1"?"还没有评论":"暂无更多评论";
		          html='<div class="fly-none" style="min-height: 50px; padding:30px 0; height:auto;"><i style="font-size:14px;">'+msg+'</i></div>';
		        }else{

		          for(let i=0;i<list.length;i++){

		            /*if(list[i].hot=='1'){
		              status+='<span class="mine-edit ">推荐</span>';
		            }
		            if(list[i].top=='1'){
		              status+='<span class="mine-edit">置顶</span>';
		            }*/

		            html+='<div class="info-box"><div class="info-item"><img class="info-img" src="'+list[i].avatar+'" alt=""><div class="info-text"><p class="title count"><span class="name">'+list[i].nickname+'</span><span class="name" style="margin-left:15px;">发表时间：'+list[i].addtime+'</span><span class="info-img"><i class="layui-icon layui-icon-praise"></i>'+list[i].zan+'</span></p><p class="info-intr">"'+list[i].content+'"<span style="float:right;font-size:12px;" class="huifu">回复</span></p></div></div></div>';
		          }

		        }

		        $("#comment-list").html(html);

		      },'json');
		    
		    }
		  });

		
		  
		  // end 分頁
		 


		  // start 导航显示隐藏
		  
		  $("#mobile-nav").on('click', function(){
		    $("#pop-nav").toggle();
		  });

		  // end 导航显示隐藏




		  //start 评论的特效
		  
		  (function ($) {
		    $.extend({
		        tipsBox: function (options) {
		          options = $.extend({
		            obj: null,  //jq对象，要在那个html标签上显示
		            str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
		            startSize: "12px",  //动画开始的文字大小
		            endSize: "30px",    //动画结束的文字大小
		            interval: 600,  //动画时间间隔
		            color: "red",    //文字颜色
		            callback: function () { }    //回调函数
		          }, options);

		          $("body").append("<span class='num'>" + options.str + "</span>");

		          var box = $(".num");
		          var left = options.obj.offset().left + options.obj.width() / 2;
		          var top = options.obj.offset().top - 10;
		          box.css({
		            "position": "absolute",
		            "left": left + "px",
		            "top": top + "px",
		            "z-index": 9999,
		            "font-size": options.startSize,
		            "line-height": options.endSize,
		            "color": options.color
		          });
		          box.animate({
		            "font-size": options.endSize,
		            "opacity": "0",
		            "top": top - parseInt(options.endSize) + "px"
		          }, options.interval, function () {
		            box.remove();
		            options.callback();
		          });
		        }
		      });
		  })($); 

		  function niceIn(prop){
		    prop.find('i').addClass('niceIn');
		    setTimeout(function(){
		      prop.find('i').removeClass('niceIn'); 
		    },1000);    
		  }

		  $(function () {

		    $(".like").on('click',function () {
		      
		      var _this = $(this);　
		      if(!($(this).hasClass("layblog-this"))){


		      	$.post("{:url('newszan')}",{newsid:'{:input('newsid')}'},function(res){

		      		
		      		if(res.code=='1'){
		      			_this.text = '已赞';
				        $(_this).addClass('layblog-this');
				        $.tipsBox({
				          obj: $(_this),
				          str: "+1",
				          callback: function () {
				          }
				        });

				        $(_this).find('em').text($(_this).find('em').text()*1+1);
				        niceIn($(_this));
				        layer.msg(res.msg, {
				          icon: 6
				          ,time: 1000
				        });
		      		}else{
		      			layer.msg(res.msg, {
				          icon: 6
				          ,time: 1000
				        })
		      		}

		      	
			        

			    },'json');
		      } 
		    });
		  });

		  //end 评论的特效


		  // start点赞图标变身
		  $('#comment-list').on('click', '.info-img', function(){
		    $(this).addClass('layblog-this');
		  })


		  // end点赞图标变身

		  //end 提交
		  $('#item-btn').on('click', function(){
		    var elemCont = $('#LAY-msg-content')
		    ,content = elemCont.val();
		    if(content.replace(/\s/g, '') == ""){
		      layer.msg('请先输入留言');
		      return elemCont.focus();
		    }

		    var view = $('#LAY-msg-tpl').html()

		    //模拟数据
		    ,data = {
		      username: '闲心'
		      ,avatar: '../res/static/images/info-img.png'
		      ,praise: 0
		      ,content: content
		    };

		    //模板渲染
		    laytpl(view).render(data, function(html){
		      $('#comment-list').prepend(html);
		      elemCont.val('');
		      layer.msg('留言成功', {
		        icon: 1
		      })
		    });

		  })

		  // start  图片遮罩
		  var layerphotos = document.getElementsByClassName('layer-photos-demo');
		  for(var i = 1;i <= layerphotos.length;i++){
		    layer.photos({
		      photos: ".layer-photos-demo"+i+""
		      ,anim: 0
		    }); 
		  }
		  // end 图片遮罩


		  //输出test接口
		  exports('blog', {}); 
		});  


	</script>
	

</body>
</html>